<template>
	<view class="content" @touchmove.stop.prevent v-if="isShow">
		<!-- 遮罩层 -->
		<view class="unify-mask-layer" @tap="cancel"></view>

		<!-- 写入内容 -->
		<view class="matter-window unify-fixed unify-background-color uni-from-the-bottom"
			:style="{'height': windowHeight + 'px'}">
			<view class="unify-margin">
				<!-- 标题 -->
				<view class="title unify-weight unify-flex">
					购物车

					<view class="iconfont el-icon-shanchu1" @tap="cancel"></view>
				</view>

				<!-- 列表 -->
				<scroll-view scroll-y="true" class="list" :style="{'height': windowHeight - 48 + 'px'}">
					<!-- 顶部操作 -->
					<view class="top-operation unify-flex unify-relative" v-if="list.length !== 0">
						<view class="iconfont el-icon-shanchu unify-flex unify-absolute" @tap="tapRemove">
							<view class="top-operation-desc">清空购物车</view>
						</view>
					</view>
					
					<!-- 空 -->
					<uni-placeholder bottom="60px" v-else></uni-placeholder>
					
					<view class="item unify-flex" v-for="(item,index) in list" :key="index">
						<view class="item-right unify-flex">
							<image class="cover unify-radius" :src="item.image||errorImage" mode=""></image>

							<view class="item-info unify-relative">
								<view class="item-name unify-font-size-line-astrict unify-weight">{{item.name}}
								</view>
								<!-- {{item.id}} -->
								
								<!-- <view class="item-desc">已选：微辣</view> -->

								<view class="item-base unify-absolute">
									<view class="item-base-left unify-weight">
										<text class="money-symbol">{{moneySymbol}}</text>
										{{item.amount}}
									</view>
									
									<uni-goods-add-subtract :data="item" :index="index"
										:absolute="true" bottom="0" right="0" @minus="tapNumber"
										@add="tapNumber"></uni-goods-add-subtract>
								</view>
							</view>
						</view>
					</view>

					<!-- 间隔 -->
					<uni-interval height="60px"></uni-interval>
				</scroll-view>
			</view>
		</view>
		
		<!-- 自定义模态框 -->
		<uni-show-modal ref="uniShowModal" :show="isShowModal" :status="1" content="确认清空购物车宝贝吗？" @affirm="tapAffirm"></uni-show-modal>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list:{
				type:Array,
				default:null
			}
		},
		data() {
			return {
				errorImage: this.$mAssetsPath.errorImage,
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				windowHeight: 0,
				isShow: false,
				isShowModal: false,
				goodsNum: 0,
				// list: [{
				// 	goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
				// 	goods_cover: '/static/mall/goods2.png',
				// 	goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
				// 	goods_price: '19',
				// 	goods_original_price: '29',
				// 	goods_number: 0,
				// 	goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
				// }, {
				// 	goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
				// 	goods_cover: '/static/mall/goods2.png',
				// 	goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
				// 	goods_price: '19',
				// 	goods_original_price: '29',
				// 	goods_number: 0,
				// 	goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
				// }, {
				// 	goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
				// 	goods_cover: '/static/mall/goods2.png',
				// 	goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
				// 	goods_price: '19',
				// 	goods_original_price: '29',
				// 	goods_number: 0,
				// 	goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
				// }, {
				// 	goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
				// 	goods_cover: '/static/mall/goods2.png',
				// 	goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
				// 	goods_price: '19',
				// 	goods_original_price: '29',
				// 	goods_number: 0,
				// 	goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
				// }, {
				// 	goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
				// 	goods_cover: '/static/mall/goods2.png',
				// 	goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
				// 	goods_price: '19',
				// 	goods_original_price: '29',
				// 	goods_number: 0,
				// 	goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
				// }]
			}
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight - 100;
				}
			});
		},
		methods: {
			// 更新状态是否显示窗口
			updateStatus() {
				this.isShow = this.show;
			},
			
			// 关闭
			cancel() {
				this.isShow = false;
			},
			
			// 点击商品数量加减 1减  2加
			tapNumber(e, type, index, index2) {
				let list = this.list;
				this.isMinus = type; // 判断是否减操作  1减  2加
				switch (type) {
					case 1:
						list[index].goods_number--
						this.goodsNum--
						break
					case 2:
						this.show = true;
						list[index].goods_number++
						setTimeout(() => {
							this.goodsNum++
						}, 20)
						break
					default:
						break
				}
				this.list = list;
			},
			
			// 清空购物车
			tapRemove() {
				this.isShowModal = true;
				setTimeout(() => {
					this.$refs.uniShowModal.updateShow()
				})
			},
			
			// 确认
			tapAffirm() {
				this.list = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	$cover: 200rpx;

	// 遮罩层
	.unify-mask-layer {
		z-index: 97;
	}

	// 写入内容
	.matter-window {
		width: 100%;
		z-index: 97;
		bottom: var(--window-bottom);
		border-radius: 30rpx 30rpx 0 0;
	}

	.title {
		height: 48px;
		align-items: center;
		justify-content: space-between;
		font-size: $uni-font-size-lg;
	}

	.el-icon-shanchu1 {
		font-size: $uni-font-size-big;
	}

	.item {
		height: $cover;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}
	
	.top-operation {
		height: 66rpx;
		align-items: center;
		color: $uni-text-color-grey;
	}
	
	.el-icon-shanchu {
		width: max-content;
		align-items: center;
		right: 0;
	}
	
	.top-operation-desc {
		font-size: $uni-font-size-sm;
		margin-left: 10rpx;
	}

	.item-right {
		width: 100%;
		height: inherit;
		align-items: center;
		justify-content: space-between;
	}

	.cover {
		width: $cover;
		height: $cover;
	}

	.item-info {
		width: 66%;
		height: inherit;
	}

	.item-name,
	.item-desc {
		margin-top: 10rpx;
	}

	.item-desc {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}

	.item-base {
		width: 100%;
		bottom: 10rpx;
	}

	.item-base-left {
		font-size: $uni-font-size-lg;
	}

	.money-symbol {
		font-size: $uni-font-size-sm;
	}
</style>
